<template>
	<view class="body">
		<view class="head">
			<view class="mcava" @click="gomct(showObj)">
				<image :src="userInfo.avatarUrl" class="ava"></image>
			</view>
			<view class="mct" @click="gomct(showObj)">
				<view class="name">
					{{userInfo.nickName}}
				</view>
				<view class="message">
					主营卖大西瓜
				</view>
			</view>
		</view>
		<view class="center">
			<view class="commodity">
				<view class="commodityposter">
					<u-swiper
					                :list="list5"
					                @change="e => currentNum = e.current"
					                :autoplay="false"
					                indicatorStyle="right: 20px"
									height="100%"
					        >
					            <view
					                    slot="indicator"
					                    class="indicator-num"
					            >
					                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list5.length }}</text>
					            </view>
					        </u-swiper>
				</view>
				<view class="commodityintro">
					<view class="title">
						<view class="title_spjs">
							商品介绍
						</view>
						<view class="pricearea">
							价格:
							<view class="price">
								${{showObj.price}}
							</view>
						</view>
					</view>
					
					<view class="introducearea">
						{{showObj.productionName}}
					</view>
				</view>
			</view>
		</view>
<!-- 		<view class="foot">
			<view class="tophalf">
				<view class="leavingmes">留言</view>
				<view class="userava">
					<image src="/static/avatest.jpg" class="userava"></image>
				</view>
				<view class="input">
					 <u--input
					     placeholder="请输入内容"
					     border="surround"
					     v-model="value"
					     @change="change"
					   ></u--input>
				</view>
				<view class="tj">
					<u-button type="primary" icon="checkbox-mark" text="提交" shape="circle" size="small"></u-button>
				</view>
			</view>
			<view class="bottomhalf">
				<view class="other">
					
				</view>
			</view>
		</view> -->
		<view class="buyframe">
			<view class="buttonbuy">
				<view class="switchfont">
					上架
				</view>
				
					<view class="switchrelease">
						<u-switch v-model="valueA" @change="change" ></u-switch>
					</view>
					
				
				
			</view>
			<view class="buttoncontact">
				<u-button type="warning" text="删除" @click="show = true"></u-button>
				<u-popup :show="show" :round="10" mode="center" @close="close" @open="open" closeable="true">
						<view class="pop">
							<view  class="buttonqd" @click="cancel">
								<u-button type="primary" text="确定" ></u-button>
							</view>
				            <view class="buttonf">
				            	<u-button type="primary" text="否" @click="close"></u-button>
				            </view>
							
						</view>
					</u-popup>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				value: '',
				valueA:'',
				list5: [
						 // 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						 // 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						 //'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				showObj:'',
				userInfo:'',
			}
		},
		mounted(){
			let _this=this;
			uni.getStorage({
				key:"user",
				success:(res)=>{
					_this.userInfo = res.data.userInfo;
				}
			})
		},
		onLoad(options) {
			
			this.showObj=JSON.parse(decodeURIComponent(options.item));
			let _this=this;
			uni.getStorage({
				key:"user",
				success:(res)=>{
					_this.showObj['srcs']=res.data.userInfo.avatarUrl;
					_this.showObj['name']=res.data.userInfo.nickName;
				}
			})
			console.log("获取",this.showObj);
			this.list5.push(this.showObj.coverImg);
		},
		methods: {
			open(){
				
			},
			cancel(){
				var that=this;
				console.log(that.showObj.id);
				this.$axios({
					method:'POST',
					url:'/production/deleteProduction',
					data:{
						id:that.showObj.id
					}
				}
				).then(
					res=>{
						console.log("删了吗？"+res);
						
					}
				)
				.catch(
					err=>{
						console.log(err);
					}
				)
				this.show=false;
			},
			gomct(item){
				uni.navigateTo({
					url:'../merchant/merchant?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			change(e) {
			    console.log('change', e);
			},
			  close() {
			        this.show = false
			        // console.log('close');
			      },
			toOrder(){
				uni.navigateTo({
					url:'../placeOrder/placeOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	font-family:"Hiragino Sans GB","PingFang SC";
	.buyframe{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 200upx;
		background-color: #FFFFFF;
		// border-radius: 1px;
		border-left: none;
		border-right: none;
		border-bottom: none;
		// border-style: solid;
		border-top: #eeeeef 1upx solid;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-top-right-radius: 15upx;
		border-top-left-radius: 15upx;
		display: flex;
		justify-content: space-around;
		.buttonbuy{
			margin-top: 4.4%;
			width: 40%;
			background-color: #efefef;
			height: 70upx;
			display: flex;
			justify-content: space-between;
			.switchfont{
				margin-top: 12upx;
				margin-left: 20upx;
			}
			.switchrelease{
				margin-top: 10upx;
				margin-right: 10upx;
			}
		}
		.buttoncontact{
			margin-top: 4%;
			width: 40%;
			.pop{
				width: 400upx;
				height: 150upx;
				display: flex;
				
				.buttonqd{
					margin-top: 80upx;
					width: 40%;
					margin-left: 5%;
				}
				.buttonf{
					margin-top: 80upx;
					width: 40%;
					margin-left: 5%;
				}
			}
		}
	}
	.head{
		background-color: #eeeeef;
		width: 90%;
		margin-left: 5%;
		margin-top: 5%;
		margin-bottom: 5%;
		height: 200upx;
		overflow:hidden;
		display: flex;
		border-radius: 10upx;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border: solid 1upx #c8c8c8;
		.mct{
			margin-top: 5%;
			width: 70%;
			height: 130upx;
			// background-color: #2979FF;
			margin-left: 2%;
			display: flex;
			flex-wrap: wrap;
			.name{
				margin-top: 5%;
				width: 100%;
			}
		}
		.mcava{
			height: 130upx;
			width: 130upx;
			// background-color: #000000;
			border: 1upx solid #ffffff;
			border-radius: 50%;
			margin-top: 5%;
			margin-left: 5%;
			.ava{
				height: 130upx;
				width: 130upx;
				border-radius: 50%;
			}
		}
	}
	.center{
		// background-color: #ddd4cf;
		width: 90%;
		margin-left: 5%;
		
		.commodity{
			width: 100%;
			background-color: #eeeeef;
			// height: 1500upx;
			border-radius: 10upx;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			border: solid 1upx #c8c8c8;
			overflow: hidden;
			
			.commodityposter{
				width: 90%;
				margin-top: 5%;
				margin-left: 5%;
				// height: 600upx;
				height: 600upx;
				background-color: #ffffff;
				// border-radius: 15upx;
				
			}
			.commodityintro{
				width: 90%;
				margin-left: 5%;
				// height: 250upx;
				// background-color: #8a86c3;
				padding-top: 2%;
				.title{
					height: 15%;
					width: 100%;
					display: flex;
				}
				.pricearea{
					height: 100%;
					width: 50%;
					// background-color: #fffedf;
					// margin-left: 30%;
					margin-left: 10%;
					display: flex;
					.price{
						margin-left: 10%;
						font-size: 40upx;
						margin-top: -2%;
						font-weight: 800;
						color: red;
					}
				}
				.title_spjs{
					height: 100%;
					width: 40%;
					// background-color: #fffedf;
				}
				.introducearea{
					width: 83%;
					margin-left: 5%;
					// height: 70%;
					background-color: #ffffff;
					margin-top: 2%;
					table-layout: fixed;
					word-wrap: break-all;
					word-break: normal;
					padding: 20upx;
					font-size: 25upx;
					margin-bottom: 20upx;
				}
			}
		}
	}
	.foot{
		margin-top: 40upx;
		width: 90%;
		margin-left: 5%;
		// height: 1500upx;
		background-color: #eeeeef;
		border-radius: 10upx;
		display: flex;
		// flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 240upx;
		.bottomhalf{
			width: 80%;
			margin-left: 10%;
			height: 600upx;
			background-color: #ffffff;
			margin-top: 40upx;
			margin-bottom: 40upx;
			.other{
				width: 100%;
				background-color: #2979FF;
				height: 120upx;
			}
		}
		.tophalf{
			width: 80%;
			margin-left: 10%;
			margin-top: 40upx;
			background-color: #ffffff;
			height: 220upx;
			.tj{
				height: 52upx;
				width: 30%;
				margin-left: 33%;
				margin-top: 20upx;
				
			}
			.leavingmes{
				text-align: center;
			}
			.userava{
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
			.input{
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
				border: solid 1upx #c8c8c8;
				background-color: #efefef;
				width: 70%;
				margin-left: 20%;
				margin-top: -13%;
				border-radius: 10upx;
			}
		}
	}
}
.indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }
	 .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
</style>
